<template>
  <view class="my-container">
    <view class="cell-column">
      <view class="cell-text">
        设置昵称
      </view>
      <view class="cell-option">
        <input class="input" v-model="userName" maxlength="10" placeholder="请输入昵称" />
      </view>
    </view>
    <view class="my-footer" :style="{bottom: GET_SAFEAREA_BOTTOM+'px'}" @click="submitFun">
      <text class="text">完成</text>
    </view>
  </view>
</template>

<script>
  import {mapGetters} from 'vuex'
  import store, { GET_SAFEAREA_BOTTOM } from '../../store/index.js';
  import requestPost, { login } from '@/utils/request.js';
  export default{
    data() {
      return {
        userName: '',
        userInfo: null
      }
    },
    computed: {
    	...mapGetters([GET_SAFEAREA_BOTTOM])
    },
    onShow(){
      this.userInfo = Object.prototype.toString.call(uni.getStorageSync('X-UserInfo')) === "[object Object]" ? uni.getStorageSync('X-UserInfo') : null;
      this.userName = this.userInfo.nickName;
    },
    mounted() {
      console.log('安全区距离', this.GET_SAFEAREA_BOTTOM);
    },
    methods: {
      submitFun(){
        if(!this.userName || this.userName == '' ){
          uni.showToast({title: '请输入姓名！', icon: 'none'});
          return
        }
        uni.showLoading({title: '数据提交中'});
        requestPost('/wxUser/edit', {
          userId: this.userInfo.userId,
          userName: this.userInfo.userName,
          nickName: this.userName,
          }, '/baseplatform').then(res => {
          uni.hideLoading();
          if(res.code === 200){
            uni.showToast({title: '保存成功！'});
            login(true);
            // uni.navigateBack();
          }else{
            uni.showToast({title: res.msg || '操作失败！', icon: 'none'});
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-container {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 32rpx 32rpx 32rpx;
  }
  .cell-column{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: auto;
    width: 100%;
    .cell-text{
      width: 100%;
      font-size: 32rpx;
      font-weight: 400;
      color: rgba(0,0,0,0.7);
      line-height: 32rpx;
      margin: 24rpx 0;
    }
    .cell-option{
      position: relative;
      width: 100%;
      height: 100%;
      flex: 1;
      .input{
        height: 80rpx;
        line-height: 80rpx;
        font-size: 32rpx;
        padding-left: 32rpx;
        background: #F7F9FA;
      }
    }
  }
  .my-footer {
    position: fixed;
    bottom: 34rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 598rpx;
    height: 84rpx;
    background: #2187FF;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    .text {
      font-size: 32rpx;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 32rpx;
    }
  }
</style>